<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">scroll-view</view>
			<view class="tui-page__desc">常用布局案例</view>
		</view>
		<view class="tui-page__bd  tui-page__spacing">
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto 40rpx" @click="href(1)">菜单栏贴顶</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto 40rpx" @click="href(2)">drawer中使用</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto 40rpx" @click="href(3)">横向滚动</tui-button>
			<tui-drawer :visible="visible" @close="closeDrawer">
				<scroll-view scroll-y :scroll-into-view="viewId" :style="{ height: drawerH + 'px'}">
					<view class="tui-drawer-box">
						<tui-button bold height="80rpx" type="primary" shape="circle" shadow @click="scroll">向下滚动</tui-button>
						<view style="height: 900px;"></view>
						<tui-button bold height="80rpx" type="gray-danger" shape="circle" @click="closeDrawer">关闭抽屉</tui-button>
						<view id="btm"></view>
					</view>
				</scroll-view>
			</tui-drawer>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visible: false,
				viewId: "",
				drawerH: 400
			}
		},
		onLoad() {
			let header = 0
			// #ifdef H5
			header = 44
			// #endif
			uni.getSystemInfo({
				success: res => {
					this.drawerH = res.windowHeight + header;
				}
			});
		},
		methods: {
			href(type) {
				if (type == 1) {
					this.tui.href("../sticky/sticky")
				} else if (type == 2) {
					this.visible = true
				} else {
					this.tui.href("../horizontal-scroll/horizontal-scroll")
				}
			},
			closeDrawer() {
				this.visible = false
			},
			scroll() {
				this.viewId = ""
				setTimeout(() => {
					this.viewId = "btm"
				}, 20)
			}
		}
	}
</script>

<style>
	.tui-drawer-box {
		width: 600rpx;
		padding: 80rpx 60rpx;
		box-sizing: border-box;
	}
</style>
